<template>
  <div class="pet-knowledge-page">
    <!-- 背景图片 -->
    <div class="page_bg" :style="`background: url(${require('@/assets/images/indb.jpg')}) center top no-repeat;`"></div>
    
    <!-- 主要内容 -->
    <div class="container">
      <div class="row">
        <!-- 右侧主内容区域 -->
        <div class="col-xs-12 col-sm-8 col-md-9" style="float:right">
          <div class="list_box">
            <h2 class="left_h2">养宠知识</h2>
            <div v-if="loading" class="loading-state">
              <p>正在加载文章...</p>
            </div>
            <div v-else-if="error" class="error-state">
              <p>加载失败：{{ error }}</p>
            </div>
            <ul v-else class="list_news">
              <li v-for="article in articles" :key="article.id">
                <router-link 
                  :to="`/pet-column/article/${article.id}`" 
                  :title="article.title"
                >
                  {{ article.title }}
                </router-link>
                <span class="news_time">{{ formatDate(article.date) }}</span>
              </li>
            </ul>
            
            <!-- 分页 -->
            <div class="pagebar" v-if="totalPages > 1">
              <div class="pagination">
                <a 
                  class="page-item page-link st" 
                  @click="goToPage(currentPage - 1)"
                  :class="{ disabled: currentPage === 1 }"
                  href="javascript:;" 
                  title="上一页"
                >
                  &lt;&lt;
                </a>
                <a 
                  v-for="page in visiblePages" 
                  :key="page"
                  @click="goToPage(page)"
                  :class="['page-num', { 'page-num-current': page === currentPage }]"
                  href="javascript:;"
                >
                  {{ page }}
                </a>
                <a class="page-item page-link" href="javascript:;" :title="`当前页/总页数`">
                  {{ currentPage }}/{{ totalPages }}
                </a>
                <a 
                  class="page-item page-link st" 
                  @click="goToPage(currentPage + 1)"
                  :class="{ disabled: currentPage === totalPages }"
                  href="javascript:;" 
                  title="下一页"
                >
                  &gt;&gt;
                </a>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 左侧边栏 -->
        <div class="col-xs-12 col-sm-4 col-md-3">
          <!-- 导航菜单 -->
          <div class="left_nav" id="categories">
            <h2 class="left_h2">宠物栏目</h2>
            <ul class="left_nav_ul" id="firstpane">
              <li>
                <router-link class="biglink curr" to="/pet-column/knowledge">
                  养宠知识
                </router-link>
              </li>
              <li>
                <router-link class="biglink" to="/pet-column/news">
                  宠物新闻
                </router-link>
              </li>
            </ul>
          </div>
          
          <!-- 搜索框 -->
          <form @submit.prevent="performSearch">
            <div class="input-group search_group">
              <input 
                type="text" 
                v-model="searchKeyword"
                class="form-control input-sm" 
                placeholder="信息查询"
              >
              <span class="input-group-btn">
                <button @click="performSearch" class="btn btn-sm mysearch_btn" type="button">
                  搜 索
                </button>
              </span>
            </div>
          </form>
          
          <!-- 养宠知识 -->
          <div class="left_news">
            <h2 class="left_h2">养宠知识</h2>
            <ul>
              <li v-for="knowledge in knowledgeArticles.slice(0, 5)" :key="knowledge.id">
                <router-link :to="`/pet-column/article/${knowledge.id}`" :title="knowledge.title">
                  {{ knowledge.title }}
                </router-link>
                <span class="news_time">{{ formatDate(knowledge.date, true) }}</span>
              </li>
            </ul>
          </div>
          
          <!-- 联系我们 -->
          <div class="left_contact">
            <h2 class="left_h2" style="margin-bottom:20px;">联系我们</h2>
            <p v-if="contactInfo.name">联系人：{{ contactInfo.name }}</p>
            <p v-if="contactInfo.phone">手机：{{ contactInfo.phone }}</p>
            <p v-if="contactInfo.tel">电话：{{ contactInfo.tel }}</p>
            <p v-if="contactInfo.email">邮箱：{{ contactInfo.email }}</p>
            <p v-if="contactInfo.address">地址：{{ contactInfo.address }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ApiService from '@/services/api'

export default {
  name: 'PetKnowledge',
  data() {
    return {
      searchKeyword: '',
      currentPage: 1,
      pageSize: 10,
      articles: [],
      contactInfo: {},
      loading: false,
      error: null,
      total: 0,
      totalPages: 0,
      knowledgeArticles: [
        {
          id: 7,
          title: '猫为什么会炸毛',
          date: '2025-09-13',
          category: 'knowledge',
          author: '宠物专家',
          views: 45623,
          content: `猫咪炸毛是一种自然的生理反应，通常出现在感到威胁、兴奋或恐惧的时候。了解猫咪炸毛的原因有助于更好地理解和照顾我们的猫咪朋友。

当猫咪感到害怕或受到威胁时，它们会本能地让毛发竖立起来，这样可以让自己看起来更大更可怕，以此来威慑潜在的敌人。这种反应是猫科动物的天性，不仅家猫会这样，野生的大型猫科动物也有同样的行为。

除了恐惧和威胁，猫咪在极度兴奋时也可能会炸毛。比如在玩耍时突然听到奇怪的声音，或者看到陌生的动物时。这种情况下的炸毛通常伴随着弓背、侧身站立等姿势。

作为主人，当我们看到猫咪炸毛时，应该首先观察周围环境，找出可能导致猫咪紧张的因素。如果是因为恐惧，我们应该保持冷静，轻声安慰猫咪，不要强行接近或抱起它，这可能会让它更加紧张。

如果猫咪经常无缘无故地炸毛，可能是压力过大或健康问题的表现，建议及时咨询兽医师。`
        },
        {
          id: 8,
          title: '如何正确训练小狗大小便',
          date: '2025-09-13',
          category: 'knowledge',
          author: '训犬师',
          views: 67890,
          content: `训练小狗正确的大小便习惯是养狗的基础课程。通过正确的方法和耐心的训练，可以让小狗养成良好的卫生习惯。

首先，要为小狗建立固定的排便区域。可以在家中选择一个通风良好、容易清理的地方，铺上专用的狗狗尿垫或报纸。这个区域要保持相对固定，让小狗形成条件反射。

观察小狗的排便信号也很重要。通常，小狗在饭后30分钟到1小时内，或者刚醒来时最容易排便。当发现小狗在地上嗅来嗅去、转圈或者显得不安时，就要立即将它带到指定区域。

当小狗在正确的地方排便时，要立即给予奖励和表扬。可以用温柔的语调说"好棒"、"乖狗狗"等，或者给一些小零食作为奖励。正面强化比惩罚更有效。

如果小狗在错误的地方排便，不要大声斥责或惩罚，这样可能会让它害怕排便。应该立即清理干净，用除臭剂去除气味，防止小狗再次在同一地点排便。

训练需要耐心和一致性。通常需要几周到几个月的时间才能完全训练成功，主人要保持耐心，不要因为一时的失败而放弃。`
        },
        {
          id: 9,
          title: '宠物疫苗接种完整指南',
          date: '2025-09-13',
          category: 'knowledge',
          author: '兽医师',
          views: 53421,
          content: `宠物疫苗接种是保护宠物健康的重要措施。本文将详细介绍各种疫苗的接种时间、注意事项等重要信息。

对于幼犬，第一次疫苗接种通常在6-8周龄时开始。核心疫苗包括犬瘟热、犬细小病毒、犬腺病毒和狂犬病疫苗。这些疫苗能够预防最常见和最致命的犬类疾病。

幼犬的免疫程序通常需要接种3-4次，每次间隔3-4周。第一次接种后，需要在9-11周龄时进行第二次接种，12-15周龄时进行第三次接种。狂犬病疫苗通常在12-16周龄时接种。

对于幼猫，疫苗接种也同样重要。核心疫苗包括猫瘟热、猫杯状病毒、猫鼻气管炎和狂犬病疫苗。首次接种时间也是在6-8周龄。

成年宠物需要定期进行疫苗加强免疫。通常每年需要接种一次，具体的接种计划应该根据兽医师的建议来制定。

接种疫苗后，宠物可能会出现轻微的不适反应，如食欲下降、精神萎靡等，这些都是正常现象，通常1-2天后会自行恢复。如果出现严重的过敏反应，应立即联系兽医师。

疫苗接种前后要注意宠物的健康状况，生病期间不应接种疫苗。接种后一周内尽量避免给宠物洗澡，减少外出活动。`
        },
        {
          id: 10,
          title: '如何选择适合的宠物食品',
          date: '2025-09-13',
          category: 'knowledge',
          author: '宠物营养师',
          views: 41267,
          content: `选择合适的宠物食品对宠物的健康至关重要。本文将从营养成分、年龄阶段、健康状况等方面详细说明如何选择。

首先要了解宠物的营养需求。犬类和猫类的营养需求不同，猫咪是严格的肉食动物，需要更多的蛋白质和特定的氨基酸如牛磺酸。狗狗则是杂食动物，营养需求相对多样化。

根据年龄选择食品也很重要。幼宠需要高能量、高蛋白的食品来支持快速生长；成年宠物需要均衡的营养来维持日常活动；老年宠物则需要易消化、低脂肪的食品。

查看食品标签时，要注意主要成分。优质的宠物食品应该以肉类作为主要成分，避免过多的谷物填充料。蛋白质含量应该适中，过高或过低都不好。

考虑宠物的特殊需求。有些宠物可能对某些成分过敏，需要选择低过敏性食品。有慢性疾病的宠物可能需要处方食品。

品牌的选择也很重要。选择有良好声誉、通过相关认证的品牌。可以咨询兽医师的意见，或者查看其他宠物主人的评价。

转换食品时要循序渐进。新食品应该逐渐添加到原有食品中，用7-10天的时间完成完全转换，避免突然改变导致肠胃不适。

定期检查宠物的体重和健康状况。如果发现宠物过胖或过瘦，或者出现其他健康问题，应该及时调整食品或咨询兽医师。`
        },
        {
          id: 11,
          title: '宠物洗澡的正确方法',
          date: '2025-09-13',
          category: 'knowledge',
          author: '宠物美容师',
          views: 38964,
          content: `给宠物洗澡看似简单，但其中有很多需要注意的细节。正确的洗澡方法不仅能保持宠物清洁，还能增进与宠物的感情。

洗澡前的准备工作很重要。首先要选择合适的洗澡场所，浴缸或者专用的宠物洗澡台都可以。准备好宠物专用的洗发水、毛巾、吹风机等用品。室温要适宜，避免宠物着凉。

水温的控制很关键。水温应该略高于体温，大约38-40度。可以用手腕内侧测试水温，感觉微热即可。过热的水会烫伤宠物，过冷的水会让宠物感到不适。

洗澡的顺序也有讲究。先用清水将宠物全身打湿，然后涂抹洗发水，从脖子开始，避开眼睛和耳朵，逐渐向下清洗。特别注意爪子之间和腹部等容易藏污垢的地方。

冲洗要彻底。洗发水残留会导致皮肤问题，所以一定要用清水彻底冲洗干净。可以用手指感受毛发，确保没有滑腻感。

洗完澡后要立即擦干。先用毛巾吸干大部分水分，然后用吹风机吹干。吹风机要保持适当距离，避免烫伤。对于长毛宠物，可以边吹边梳理，防止毛发打结。

洗澡频率不宜过高。一般来说，狗狗每月洗1-2次即可，猫咪由于自己会清洁，通常不需要经常洗澡。过度洗澡会破坏皮肤的天然保护层。`
        },
        {
          id: 12,
          title: '如何识别宠物常见疾病症状',
          date: '2025-09-13',
          category: 'knowledge',
          author: '兽医师',
          views: 49856,
          content: `早期发现宠物疾病症状对治疗至关重要。本文将介绍一些常见的疾病症状，帮助主人及时发现问题。

观察宠物的日常行为变化是发现疾病的第一步。健康的宠物通常活泼好动，食欲良好。如果发现宠物突然变得懒散、不愿活动，或者食欲明显下降，就需要引起注意。

消化系统症状比较容易观察。呕吐、腹泻、便秘都是常见的消化系统问题表现。偶尔的轻微症状可能不需要担心，但如果症状持续或者伴随其他不适，应该及时就医。

呼吸系统症状也需要密切关注。咳嗽、喘息、呼吸困难都可能是严重疾病的表现。特别是短鼻品种的狗狗，更容易出现呼吸问题。

皮肤问题在宠物中很常见。过度抓挠、皮肤红肿、脱毛、异味等都可能是皮肤病的表现。有些皮肤问题可能是过敏引起的，需要找出过敏原。

眼部和耳部症状也不容忽视。眼睛发红、流泪、分泌物增多可能是眼部感染。耳朵有异味、频繁抓挠耳朵可能是耳部感染。

行动能力的变化也是重要指标。跛行、不愿跳跃、活动时显得疼痛都可能是关节或骨骼问题的表现，特别是在老年宠物中比较常见。

体重的异常变化也需要关注。突然的体重下降可能是疾病的表现，而体重过度增加则可能导致各种健康问题。

如果发现任何异常症状，特别是症状持续时间较长或者多种症状同时出现时，应该及时咨询兽医师，不要自行诊断和治疗。`
        },
        {
          id: 13,
          title: '新手养猫完全指南',
          date: '2025-09-13',
          category: 'knowledge',
          author: '猫咪专家',
          views: 72345,
          content: `第一次养猫需要了解很多知识，从选择猫咪、准备用品到日常护理，本指南将为新手提供全面的帮助。

选择猫咪时要考虑多个因素。如果是新手，建议选择性格温顺、容易照顾的品种。年龄方面，小猫虽然可爱，但需要更多照顾；成年猫性格已经稳定，可能更适合新手。

准备必需的用品很重要。包括猫砂盆、猫砂、食盆、水盆、猫粮、猫抓板、猫窝、玩具等。选择质量好的用品能够用得更久，也对猫咪的健康有益。

猫砂盆的选择和摆放很关键。盆子要足够大，让猫咪能够舒适地转身。摆放位置要安静、通风，远离食盆和水盆。定期清理猫砂，保持清洁。

喂食方面，幼猫需要高蛋白的幼猫粮，成年猫则选择成猫粮。定时定量喂食，避免过度喂养。清洁的饮用水要随时提供。

猫咪的社交需求也不能忽视。虽然猫咪相对独立，但它们也需要陪伴和互动。每天花一些时间和猫咪玩耍，使用逗猫棒等玩具。

健康护理包括定期的疫苗接种、驱虫、体检等。观察猫咪的日常行为，及时发现异常情况。

室内环境的安全也很重要。收好可能对猫咪有害的物品，如小物件、有毒植物、清洁剂等。确保窗户和阳台的安全，防止猫咪意外坠落。

猫咪的行为理解需要时间。每只猫咪都有自己的性格和习惯，需要耐心观察和了解。建立良好的日常生活。`
        },
        {
          id: 14,
          title: '狗狗社交化训练的重要性',
          date: '2025-09-13',
          category: 'knowledge',
          author: '训犬师',
          views: 36789,
          content: `狗狗的社交化训练对其性格发展和行为表现有重要影响。适当的社交化训练能让狗狗更好地适应社会环境。

社交化的黄金期是在幼犬3-14周龄期间。这个时期的经历会深深影响狗狗的一生。在这个阶段，幼犬应该接触各种不同的人、动物、环境和声音。

与人的社交化很重要。让幼犬接触不同年龄、性别、外貌的人，包括儿童、老人、戴帽子的人等。这样可以防止狗狗长大后对某些类型的人产生恐惧或攻击性。

与其他动物的社交化也必不可少。安排幼犬与其他友善的狗狗接触，学习正确的狗际交往方式。如果家中有其他宠物，也要逐渐引导它们和谐相处。

环境适应性训练包括让狗狗适应各种不同的环境。城市街道、公园、商店、车辆等都是日常可能遇到的环境。逐渐增加环境的复杂性和刺激强度。

声音敏感性的训练也很重要。让狗狗适应各种日常声音，如门铃声、汽车声、雷声等。可以从较小的音量开始，逐渐增加，避免突然的强烈刺激。

正确的社交化方法包括保持积极的体验。每次社交化训练都应该是愉快的，如果狗狗显示出恐惧或不适，应该立即停止，重新评估方法。

成年狗狗的社交化训练虽然更困难，但依然可能。需要更多的耐心和时间，循序渐进地进行。对于有行为问题的成年狗，建议寻求专业训犬师的帮助。

社交化不足的狗狗可能会出现各种行为问题，如过度吠叫、攻击性、恐惧症等。这些问题不仅影响狗狗的生活质量，也会给主人带来困扰。`
        },
        {
          id: 15,
          title: '宠物老年期护理指南',
          date: '2025-09-13',
          category: 'knowledge',
          author: '兽医师',
          views: 44523,
          content: `随着宠物年龄增长，它们的护理需求也会发生变化。了解老年宠物的特殊需求，为它们提供更好的晚年生活。

老年宠物的定义因品种而异。一般来说，小型犬在7-8岁进入老年期，大型犬在5-6岁就可能开始出现老年化征象。猫咪通常在7-8岁开始进入老年期。

营养需求的调整很重要。老年宠物的新陈代谢放慢，可能需要低热量、高质量蛋白质的食品。对于有特殊健康问题的老年宠物，可能需要处方食品。

定期的健康检查变得更加重要。建议老年宠物每6个月进行一次全面的健康检查，包括血液检查、尿液检查等，以便早期发现和治疗疾病。

关节健康是老年宠物的常见问题。可以为宠物提供软垫的睡觉地点，适当的运动有助于保持关节灵活性，但要避免过度运动。

牙齿护理在老年期更加重要。老年宠物容易出现牙齿问题，定期的牙齿检查和清洁可以预防口腔疾病，保持食欲和营养摄入。

环境的调整有助于老年宠物的舒适度。提供容易进出的睡觉区域，确保食盆和水盆容易够到，减少需要跳跃的情况。

心理关怀也不容忽视。老年宠物可能会出现认知功能下降，表现为迷失方向、睡眠模式改变等。保持规律的日常生活，给予更多的关爱和陪伴。

疼痛管理是老年宠物护理的重要组成部分。如果发现宠物有疼痛的迹象，如不愿活动、食欲下降等，应该及时咨询兽医师，寻求适当的疼痛管理方案。

生活质量的评估很重要。作为主人，需要客观评估宠物的生活质量，在必要时做出艰难但慈悲的决定。重要的是让宠物度过有尊严、少痛苦的晚年。`
        }
      ]
    }
  },
  computed: {
    // 可见的页码
    visiblePages() {
      const pages = []
      const maxVisiblePages = 5
      let start = Math.max(1, this.currentPage - Math.floor(maxVisiblePages / 2))
      let end = Math.min(this.totalPages, start + maxVisiblePages - 1)
      
      if (end - start < maxVisiblePages - 1) {
        start = Math.max(1, end - maxVisiblePages + 1)
      }
      
      for (let i = start; i <= end; i++) {
        pages.push(i)
      }
      return pages
    }
  },
  async mounted() {
    await this.fetchArticles()
    await this.fetchContactInfo()
  },
  methods: {
    async fetchArticles() {
      try {
        this.loading = true
        this.error = null
        const response = await ApiService.get('/knowledge-articles', {
          params: {
            search: this.searchKeyword,
            page: this.currentPage,
            pageSize: this.pageSize
          }
        })
        
        if (response.success) {
          this.articles = response.data
          this.total = response.total
          this.totalPages = response.totalPages
        }
      } catch (error) {
        console.error('获取知识文章失败:', error)
        this.error = '加载文章失败'
      } finally {
        this.loading = false
      }
    },
    async fetchContactInfo() {
      try {
        const response = await ApiService.get('/contact-info')
        if (response.success) {
          this.contactInfo = response.data
        }
      } catch (error) {
        console.error('获取联系信息失败:', error)
      }
    },
    // 跳转到指定页面
    async goToPage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page
        await this.fetchArticles()
        window.scrollTo({ top: 0, behavior: 'smooth' })
      }
    },
    // 执行搜索
    async performSearch() {
      this.currentPage = 1
      await this.fetchArticles()
    },
    // 格式化日期
    formatDate(dateString, short = false) {
      const date = new Date(dateString)
      if (short) {
        return `${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}`
      }
      return date.toLocaleDateString('zh-CN')
    }
  }
}
</script>

<style scoped>
.pet-knowledge-page {
  padding-top: 0; /* 使用全局body padding-top */
}

.page_bg {
  height: 200px;
  background-size: cover !important;
  background-position: center !important;
  margin-bottom: 30px;
}

.list_box {
  background: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.left_h2 {
  color: #04A07B;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #04A07B;
}

.list_news {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list_news li {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list_news li:last-child {
  border-bottom: none;
}

.list_news a {
  color: #333;
  text-decoration: none;
  flex: 1;
  margin-right: 15px;
  line-height: 1.5;
}

.list_news a:hover {
  color: #04A07B;
}

.news_time {
  color: #999;
  font-size: 14px;
  white-space: nowrap;
}

/* 侧边栏样式 */
.left_nav, .left_news, .left_contact {
  background: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.left_nav_ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.left_nav_ul li {
  border-bottom: 1px solid #eee;
}

.left_nav_ul li:last-child {
  border-bottom: none;
}

.biglink {
  display: block;
  padding: 12px 0;
  color: #333;
  text-decoration: none;
  font-weight: 500;
}

.biglink:hover {
  color: #04A07B;
}

.biglink.curr {
  color: #04A07B;
  font-weight: bold;
}

.search_group {
  margin-bottom: 20px;
}

.mysearch_btn {
  background: #04A07B;
  color: white;
  border: none;
}

.mysearch_btn:hover {
  background: #038066;
}

.left_news ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.left_news li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left_news li:last-child {
  border-bottom: none;
}

.left_news a {
  color: #333;
  text-decoration: none;
  flex: 1;
  margin-right: 10px;
  font-size: 14px;
}

.left_news a:hover {
  color: #04A07B;
}

.left_contact p {
  margin-bottom: 8px;
  color: #666;
}

/* 分页样式 */
.pagebar {
  text-align: center;
  margin-top: 30px;
}

.pagination {
  display: inline-flex;
  gap: 5px;
}

.page-item, .page-num {
  display: inline-block;
  padding: 8px 12px;
  margin: 0 2px;
  background: white;
  border: 1px solid #ddd;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
}

.page-item:hover, .page-num:hover {
  background: #04A07B;
  color: white;
  border-color: #04A07B;
}

.page-num-current {
  background: #04A07B !important;
  color: white !important;
  border-color: #04A07B !important;
}

.page-item.disabled {
  background: #f8f9fa;
  color: #6c757d;
  cursor: not-allowed;
  pointer-events: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .col-xs-12.col-sm-8.col-md-9 {
    float: none !important;
    order: 2;
  }
  
  .col-xs-12.col-sm-4.col-md-3 {
    order: 1;
    margin-bottom: 20px;
  }
  
  .pet-knowledge-page {
    padding-top: 0; /* 使用全局body padding-top */
  }
}
</style>